<template>
  <div class="com_container">
    <div class="com_chart" ref="ref_hot"></div>
    <span :style="cmStyle" class="iconfont icon-arrow-lift" @click="handleLeft"></span>
    <span :style="cmStyle" class="iconfont icon-arrow-right" @click="handleRight"></span>
    <span :style="cmStyle" class="titleCate">{{ comCate }}</span>
  </div>
</template>

<script>
import { getThemeValue } from '@/utils/theme_utils'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      echartInstance: null,
      allData: null,
      titleSize: 0,
      // 当前展示第一分类
      courrentIndex: 0
    }
  },
  computed: {
    comCate() {
      if (!this.allData) {
        return ''
      } else {
        return this.allData[this.courrentIndex].name
      }
    },
    cmStyle() {
      return { fontSize: this.titleSize + 'px', color: getThemeValue(this.theme).titleColor }
    },
    ...mapState(['theme'])
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    async initChart() {
      this.echartInstance = this.$echarts.init(this.$refs.ref_hot, this.theme)

      const initOption = {
        title: {
          text: '▎热销商品的占比',
          left: 20,
          top: 20
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: '13%',
          icon: 'circle'
        },

        series: [
          {
            type: 'pie',
            // 取消显示 label
            label: {
              show: false
            },

            emphasis: {
              // 在高粱的情况下显示label
              label: {
                show: true
              },
              // 在高粱的情况下取消显示labelLine
              labelLine: {
                show: false
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.echartInstance.setOption(initOption)
    },
    async getData() {
      const { data: res } = await this.$http.get('hot')
      // console.log(res)
      this.allData = res

      this.upData()
    },
    upData() {
      // 处理数据
      const seriesData = this.allData[this.courrentIndex].children.map((i) => {
        return {
          name: i.name,
          value: i.value,
          // 將children 传入 tooltip
          children: i.children
        }
      })
      const legendArr = this.allData[this.courrentIndex].children.map((i) => {
        return i.name
      })
      const dataOption = {
        tooltip: {
          trigger: 'item',
          formatter(i) {
            // console.log(i)
            const thirdCategory = i.data.children
            // 计算三级分类的总和
            let total = 0
            thirdCategory.forEach((item) => {
              total += item.value
            })
            let nameStr = ''
            //  parseInt() 函数可解析一个字符串，并返回一个整数。parseInt(string, radix)

            thirdCategory.forEach((item) => {
              nameStr += `
              ${item.name}:${parseInt((item.value / total) * 100) + '%'} <br>`
            })
            return nameStr
          }
        },
        legend: {
          data: legendArr
        },

        series: [
          {
            data: seriesData
          }
        ]
      }
      this.echartInstance.setOption(dataOption)
    },
    screenAdapter() {
      this.titleSize = (this.$refs.ref_hot.offsetWidth / 100) * 3.6
      const screenOption = {
        title: {
          textStyle: {
            fontSize: this.titleSize
          }
        },
        legend: {
          itemWidth: this.titleSize,
          itemHeight: this.titleSize,
          itemGap: this.titleSize / 2,
          textStyle: {
            fontSize: this.titleSize / 1.3
          }
        },
        series: [
          {
            radius: this.titleSize * 5,
            center: ['50%', '55%']
          }
        ]
      }
      this.echartInstance.setOption(screenOption)
      this.echartInstance.resize()
    },
    // 点击左箭头
    handleLeft() {
      this.courrentIndex--
      if (this.courrentIndex <= 0) {
        this.courrentIndex = this.allData.length - 1
      }
      this.upData()
    },
    handleRight() {
      this.courrentIndex++
      if (this.courrentIndex >= this.allData.length - 1) {
        this.courrentIndex = 0
      }
      this.upData()
    }
  },
  watch: {
    theme() {
      console.log('主题改变了')
      console.log(this.theme)

      this.echartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.upData() // 更新图表的展示
    }
  }
}
</script>

<style lang="scss" scoped>
.com_container {
  .icon-arrow-lift {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    color: #ffffff;
    cursor: pointer;
  }

  .icon-arrow-right {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    color: #ffffff;
    cursor: pointer;
  }
  .titleCate {
    position: absolute;
    right: 20%;
    bottom: 10%;
    transform: translateY(-50%);
    color: #ffffff;
  }
}
</style>
